﻿@page "/datagrid/foreign-key-column"

@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor
@using BlazorDemos
@using blazor_griddata
@inherits SampleBaseComponent;

<SampleDescription>
    <p>
        In this sample, First Name column is a foreign column. You can perform filtering and editing in the foreign key column.
    </p>
</SampleDescription>
<ActionDescription>
    <p>Grid has option to show foreign key columns. It can be enabled by using the <strong>ForeignDataSource</strong>, <strong>ForeignKeyField</strong> and <strong>ForeignKeyValue</strong> properties of <strong>GridForeignColumn</strong> directive.</p>
    <p>More information on the foreign key column can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/datagrid/columns/#foreign-key-column'>documentation section</a>.</p>
</ActionDescription>


<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">
            <div class='e-mastertext'><b>Local Data</b></div>
            <SfGrid DataSource="@GridData" AllowPaging="true" AllowFiltering="true" Toolbar="@(new List<string>() {"Add", "Edit", "Delete", "Update","Cancel","Search" })" >
                <GridFilterSettings Type="FilterType.Menu"></GridFilterSettings>
                <GridPageSettings PageSize="5"></GridPageSettings>
                <GridEditSettings AllowEditing="true" AllowAdding="true" AllowDeleting="true"></GridEditSettings>
                <GridColumns>
                    <GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" IsPrimaryKey="true" Width="100" ValidationRules="@(new ValidationRules{ Required=true, Number=true})"></GridColumn>
                    <GridForeignColumn Field=@nameof(OrdersDetails.EmployeeID) HeaderText="First Name" ForeignKeyValue="FirstName" ValidationRules="@(new ValidationRules{ Required=true})" ForeignDataSource="@Employees" Width="150"></GridForeignColumn>
                    <GridColumn Field=@nameof(OrdersDetails.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="160"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.OrderDate) HeaderText="Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.ShipCountry) HeaderText="Ship Country" Width="140" EditType="EditType.DropDownEdit"></GridColumn>
                </GridColumns>
            </SfGrid>
            <div class='e-mastertext'><b>Remote Data</b></div>
            <SfGrid DataSource="@RemoteData" AllowPaging="true" AllowFiltering="true" AllowSorting="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update","Cancel" })">
                <GridFilterSettings Type="FilterType.Menu"></GridFilterSettings>
                <GridPageSettings PageSize="5"></GridPageSettings>
                <GridEditSettings AllowEditing="true" AllowAdding="true" AllowDeleting="true"></GridEditSettings>
                <GridColumns>
                    <GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" IsPrimaryKey="true" Width="100" ValidationRules="@(new ValidationRules{ Required=true, Number=true})"></GridColumn>
                    <GridForeignColumn TValue="EmployeeData" Field=@nameof(OrdersDetails.EmployeeID) HeaderText="First Name" ForeignKeyValue="FirstName" Width="150" ValidationRules="@(new ValidationRules{ Required=true})">
                        <Syncfusion.Blazor.Data.SfDataManager Url="https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Employees" CrossDomain="true" Adaptor="Adaptors.ODataAdaptor">
                        </Syncfusion.Blazor.Data.SfDataManager>
                    </GridForeignColumn>
                    <GridColumn Field=@nameof(OrdersDetails.OrderDate) HeaderText="Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.ShipCountry) HeaderText="Ship Country" Width="140" EditType="EditType.DropDownEdit"></GridColumn>
                </GridColumns>
            </SfGrid>
        </div>
    </div>
</div>
<style>
    .e-mastertext {
        font-size: 15px;
        font-family: Roboto;
        opacity: 0.87;
        padding: 1em;
    }
</style>

@code{

    public List<OrdersDetails> GridData { get; set; }
    public List<OrdersDetails> RemoteData { get; set; }
    public List<EmployeeData> Employees { get; set; }
    protected override void OnInitialized()
    {
        GridData = Enumerable.Range(1, 75).Select(x => new OrdersDetails()
        {
            OrderID = 1000 + x,
            EmployeeID = new Random().Next(1, 9),
            Freight = 2.1 * x,
            OrderDate = DateTime.Now.AddDays(-x),
            ShipCountry = (new string[] { "USA", "UK", "London", "French", "Germany" })[new Random().Next(5)],
        }).ToList();

        RemoteData = Enumerable.Range(1, 75).Select(x => new OrdersDetails()
        {
            OrderID = 10000 + x,
            EmployeeID = new Random().Next(1, 9),
            Freight = 2.1 * x,
            OrderDate = DateTime.Now.AddDays(-x),
            ShipCountry = (new string[] { "USA", "UK", "London", "French", "Germany" })[new Random().Next(5)],
        }).ToList();

        Employees = new List<EmployeeData> {
            new EmployeeData { EmployeeID = 1, FirstName = "Nancy"},
            new EmployeeData { EmployeeID = 2, FirstName = "Andrew"},
            new EmployeeData { EmployeeID = 3, FirstName = "Janet"},
            new EmployeeData { EmployeeID = 4, FirstName = "Margaret"},
            new EmployeeData { EmployeeID = 5, FirstName = "Steven"},
            new EmployeeData { EmployeeID = 6, FirstName = "Anne"},
            new EmployeeData { EmployeeID = 7, FirstName = "Laura"},
            new EmployeeData { EmployeeID = 8, FirstName = "Michael"},
            new EmployeeData { EmployeeID = 9, FirstName = "Robert"},
        };
    }

    public class EmployeeData
    {
        public int? EmployeeID { get; set; }
        public string FirstName { get; set; }
    }
}
